<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webgl</title>
  <!--  定点着色器  -->
  <script type="x-shader/x-vertex" id="vertexShader">
    attribute vec2 pos;
    varying vec2 tx;
    void main() {
      gl_Position = vec4(pos.x * 2.0 - 1.0, 1.0 - pos.y * 2.0, 0, 1);
      tx = pos;
    }
  </script>

  <!--  片元着色器-->
  <script type="x-shader/x-fragment" id="fragmentShader">
    precision lowp float;
    uniform sampler2D texture;
    uniform float h;
    uniform float v;
    varying vec2 tx;
    void main() {
      gl_FragColor = texture2D(texture, tx);
    }
  </script>
</head>
<body>
<canvas id="canvas" width="500" height="300" style="background-color:#eee"></canvas>
<script>
  function $(ele) {
    return document.querySelector(ele)
  }
</script>
<script>
  var $canvas = document.getElementById("canvas");
  var gl = $canvas.getContext("webgl");
  // 获取 顶点着色器 文本
  var vertexShaderSource = $('#vertexShader').textContent;
  // 获取 片元着色器 文本
  var fragmentShaderSource1 = $('#fragmentShader').textContent;
  // 创建视频
  var video = document.createElement("video");
  var videoready = false;

  video.loop = true;
  video.muted = true;
  video.onplaying = function() {
    videoready = true;
  };
  video.crossOrigin = 'anonymous';
  video.src = '../static/demo.mp4';
  video.autoplay = 'autoplay';
  video.playsinline = false;


  //初始化着色器
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(vertexShader, vertexShaderSource);
  gl.shaderSource(fragmentShader, fragmentShaderSource1);
  gl.compileShader(vertexShader);
  gl.compileShader(fragmentShader);

  // 使用着色器
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  gl.useProgram(program);

  // 获取顶点着色器的位置变量pos
  var pos = gl.getAttribLocation(program, "pos");
  // 允许数据传递
  gl.enableVertexAttribArray(pos);

  // 获取着色器
  gl.uniform1f(gl.getUniformLocation(program, "v"), 10.0);
  gl.uniform1f(gl.getUniformLocation(program, "h"), 10.0);

  // 创建缓冲区对象
  // 顶点缓冲
  var vpos = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vpos);
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
    // STATIC_DRAW 表示只会向缓存区对象写入一次数据，但需要绘制很多次；
    gl.STATIC_DRAW
  );

  // 索引缓冲
  var ipos = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ipos);
  gl.bufferData(
    gl.ELEMENT_ARRAY_BUFFER,
    new Uint16Array([0, 1, 2, 0, 2, 3]),
    gl.STATIC_DRAW
  );

  var texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.activeTexture(gl.TEXTURE0);

  function loop() {
    if (videoready) {
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.texImage2D(
        gl.TEXTURE_2D,
        0,
        gl.RGB,
        gl.RGB,
        gl.UNSIGNED_BYTE,
        video
      );
      // 传入数据
      gl.bindBuffer(gl.ARRAY_BUFFER, vpos);
      // 传入索引
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ipos);
      // 缓冲区中的数据传递pos
      gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
      // 开始绘制图形，以三角面绘制
      gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
    }
    window.requestAnimationFrame(loop);
  }

  loop();

  video.play();

</script>
</body>
</html>
